import {
  Table,
  Button,
} from 'choerodon-ui/pro';
import React, { useContext, ReactElement, MouseEventHandler } from 'react';
import {
  TableEditMode,
  ColumnLock,
  TableButtonType,
  TableCommandType,
} from 'choerodon-ui/pro/lib/table/enum';
import { FuncType, ButtonColor } from 'choerodon-ui/pro/lib/button/enum';
import { ButtonProps } from 'choerodon-ui/pro/lib/button/Button';
import { ColumnProps } from 'choerodon-ui/pro/lib/table/Column';
import { Commands } from 'choerodon-ui/pro/lib/table/Table';
import Store from './stores';

export declare type TableButtonProps = ButtonProps & {
  afterClick?: MouseEventHandler<any>;
};
export declare type Buttons = TableButtonType | [TableButtonType, TableButtonProps] | ReactElement<TableButtonProps>;
const From: React.FC = (): React.ReactElement => {

  const { tableInlineDataSet } = useContext(Store);

  const buttons: Buttons[] = [
    TableButtonType.add,
    <Button key="create" funcType={FuncType.flat} icon="add" onClick={() => tableInlineDataSet?.create()}>
      自定义新增
    </Button>,
  ];
  // 自定义按钮
  const commands = (): Commands[] => [
    TableCommandType.edit,
    [TableCommandType.delete, { color: ButtonColor.red }],
    <Button key="add" icon="add" onClick={() => console.log(tableInlineDataSet?.current?.toData())} />,
  ];
// 自定义操作列
  const columns: ColumnProps[] = [
    { name: 'userid', style: { color: 'red' }, editor: true, width: 150, lock: true },
    { name: 'age', editor: true, width: 150, sortable: true },
    { name: 'enable', editor: true, width: 50, minWidth: 50, lock: true },
    { name: 'name', editor: true, width: 150, sortable: true },
    { name: 'status', editor: true, width: 150, sortable: true },
    { name: 'code', editor: true, width: 150 },
    { name: 'code_code', editor: true, width: 150 },
    { name: 'code_select', editor: true, width: 150 },
    { name: 'codeMultiple', editor: true, width: 150 },
    { name: 'codeMultiple_code', editor: true, width: 150 },
    { name: 'sex', editor: true, width: 150 },
    { name: 'sexMultiple', editor: true, width: 150 },
    { name: 'date.startDate', editor: true, width: 150 },
    { name: 'date.endDate', editor: true, width: 150 },
    { name: 'frozen', editor: true, width: 50, minWidth: 50, lock: ColumnLock.right },
    { name: 'numberMultiple', editor: true, width: 150 },
    { header: '操作', command: commands, width: 150, lock: ColumnLock.right },
  ];

  return (
    <Table
      dataSet={tableInlineDataSet!}
      columns={columns}
      buttons={buttons}
      editMode={TableEditMode.inline}
    />
  );
};

export default From;